<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>org - rander研究</title>
<script src="./js/vue.min.js"></script>
<script src="./org_tree/org_tree.js"></script>
<link rel="stylesheet" href="./org_tree/org_tree.css">
<style>
.org-tree-node-label .org-tree-node-label-inner {
	padding: 0 !important;
}
.cell-div{
	padding: 12px;
}
.cell-div p{
	margin: 0;
}
.title-class{
	/* margin-bottom: 4px; */
	/* font-weight: bold; */
}
.tst{
	font-weight: bold;
	padding: 10px 0;
	color: gray;
}
</style>
</head>
<body>
	<!-- Vue 中的 Render 全面详解 (渲染函数 & JSX) -->
	<!-- https://blog.csdn.net/weixin_46074961/article/details/127666760 -->
	<div id="app">
		<h3>renderContent1</h3>
		<vue2-org-tree :data="treeData" :render-content="renderContent1"></vue2-org-tree>
		<h3>renderContent2</h3>
		<vue2-org-tree :data="treeData" :render-content="renderContent2" collapsable @on-expand="onExpand"></vue2-org-tree>
		
	</div>
<!--
createElement。还有约定的简写叫 h，将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例
createElement(TagName，Option，Content)接受三个参数 
createElement("定义的元素"，{元素的性质}，"元素的内容"/[元素的内容])

-->
</body>
<script>
// 阻止 Vue 在启动时生成生产提示
Vue.config.productionTip = false;
const data = {
	"name": "武汉市企桥商务服务有限公司",
	"lead": "雷鑫",
	"count": 19,
	"status": 1, //不同的状态，显示不同的背景颜色
	"expand": true, //控制是否展开，true展开，false收起
	"describe": "武汉市企桥商务服务有限公司",
	"imageUrl": "http://10.32.145.121:8080/bomc/data/img/1.png",
	"children": [
		{
			"name": "人事行政部",
			"lead": "佘明敏",
			"count": 4,
			"status": 0,
			"describe": "企桥人事部",
			"imageUrl": "http://10.32.145.121:8080/bomc/data/img/2.png",
			"children": null,
		},
		{
			"name": "财务部",
			"lead": "何艳",
			"count": 15,
			"status": 0,
			"describe": "企桥财务部",
			"imageUrl": "http://10.32.145.121:8080/bomc/data/img/1.png",
			"children": [
				{
					"name": "财务室",
					"lead": "何艳",
					"count": 10,
					"status": -1,
					"describe": "OVU12楼财务室",
					"imageUrl": "http://10.32.145.121:8080/bomc/data/img/4.png",
					"children": null,
				},
				{
					"name": "仓库",
					"lead": "孔梅梅",
					"count": 5,
					"status": -1,
					"describe": "仓库全体人员",
					"imageUrl": "http://10.32.145.121:8080/bomc/data/img/4.png",
					"children": null,
				},
			]
		}
	]
}
let vm = new Vue({
	el: '#app',
	data: {
		treeData: {},
		is_a: true,
		is_b: false,
	},
	mounted() {
		this.treeData = data
	},
	methods: {
		renderContent: function name(createElement, data) {
			const elHtml = createElement('span', {
				attrs: {
					'class': 'span-text',
					'style': data.status === 1 ? 'background-color: #d00d4b;' : (data.status === 0 ? 'background-color: green;' : (data.status === -1 ? 'background-color: #00aaff;' : 'background-color: red;'))
				}
			}, data.name)
			return elHtml
		},
		renderContent1(h, data){
			return h('div', {style:{width:'100px',height:'100px',background:'#ccc'}}, data.name);
		},
		renderContent2(h, data){
			var _this = this;
			return h('div', {style:{}, attrs: {'class': 'cell-div'}}, [
				h('p', {
					style: 'font-weight: bold;',
					attrs: {
						'class': 'title-class',
					},
					on: {
						click: function(){
							// console.log("on-func", data.name + "(" + data.count + ")");
							_this.clickTitle(data);
						},
					}
				}, data.name),
				h('p', {
					// style: 'color: gray;font-size: 14px;margin: 6px 0;', //这和下面的写法不同，效果相同
					style: {color: 'gray',fontSize: '14px',margin: '6px 0',},
					props: { type: 'primary', size: 'medium', disabled: this.is_a || this.is_b },
					on: { click: this.save },
				}, data.lead),
				h('p', {
					style: 'color: gray;font-size: 14px',
					on: { click: this.save2 },
				}, data.count + "人")
			])
		},
		//收起
		collapse(list) {
			var _this = this;
			list.forEach(function(child) {
				if(child.expand){
					child.expand = false;
				}
				child.children && _this.collapse(child.children);
			});
		},
		// 展开
		onExpand(e,data) {
			if ("expand" in data) {
				data.expand = !data.expand;
				if (!data.expand && data.children) {
					this.collapse(data.children);
				}
			} else {
				this.$set(data, "expand", true);
			}
		},
		
		clickTitle(data){
			console.log(data.name);
		},
		save(){
			console.log('save func...');
		},
		save2(){
			console.log('save func2...');
		},
	},
})


</script>
</html>